Вам нужно знать две важные вещи: порядок рисования и контекст наложения. Если вы обратитесь к спецификации, вы можете узнать, как и когда окрашиваются элементы.
Сложение контекстов, образованных позиционированными потомками с отрицательными z-индексами (исключая 0) в порядке z-индекса (сначала самый отрицательный), затем в древовидном порядке.
Все расположенные, непрозрачные или преобразованные потомки в порядке дерева, которые попадают в следующие категории:
Все расположенные потомки с z-index: auto или z-index: 0 в древовидном порядке.
Стек контексты, сформированные позиционированными потомками с z-индексами больше или равными 1 в порядке z-индекса (сначала наименьший), затем в порядке дерева.
Из этого ясно, что мы сначала раскрашиваем элементы с отрицательным z-индексом на шаге (3), затем элемент с z-index, равным 0 на шаге (8), и, наконец, элементы с положительным z-индексом на шаге (9). , что логично. Мы также можем прочитать в другой части спецификации:
Каждый блок принадлежит одному контексту наложения. Каждый блок в данном контексте наложения имеет целочисленный уровень стека, который является его положением на оси Z относительно других блоков в том же контексте наложения. Ящики с более высокими уровнями стека всегда форматируются перед ящиками с более низкими уровнями стека. Ящики могут иметь отрицательный уровень стека. Ящики с одинаковым уровнем стека в контексте стека складываются снизу вверх в соответствии с порядком дерева документов.
Также
Элемент, который устанавливает локальный контекст стекирования, создает блок с двумя уровнями стека: один для контекста стекирования, который он создает (всегда 0), и один для контекста стека, которому он принадлежит (заданный свойством z-index).
Чтобы понять, когда каждый элемент будет раскрашен, вам необходимо знать его контекст стека и уровень стека внутри этого контекста стека (определяется z-index). Вам также необходимо знать, устанавливает ли этот элемент контекст наложения. Это сложная часть, потому что установка z-index сделает это:
Для позиционированного блока свойство z-index определяет:
Уровень стека бокса в текущем контексте стека.
Устанавливает ли коробка контекст наложения
Ценности имеют следующие значения:
<целое число>
Это целое число является уровнем стека сгенерированного блока в текущем контексте стека. Коробка также устанавливает новый контекст наложения.
авто
Уровень стека сгенерированного блока в текущем контексте наложения равен 0. Блок не устанавливает новый контекст наложения, если он не является корневым элементом.
Теперь у нас есть вся информация, чтобы лучше разобраться в каждом конкретном случае. Если родительский элемент имеет значение z-index, отличное от auto, тогда он создаст контекст наложения, таким образом, дочерний элемент будет закрашен внутри независимо от их z-индекса (отрицательного или положительного). Z-index дочернего элемента просто скажет нам порядок рисования внутри родительского элемента (это касается вашего второго пункта).
Теперь, если только дочерний элемент имеет положительный z-индекс и мы ничего не установили для родительского элемента, то, учитывая порядок рисования, дочерний элемент будет окрашен позже (на шаге (9)), а родительский - на шаге (8). Единственный логический способ нарисовать родительский элемент выше - это увеличить z-index, но это заставит нас попасть в предыдущий случай, когда родительский элемент устанавливает контекст стекирования, а дочерний элемент будет принадлежать ему.
Невозможно разместить родительский элемент над дочерним элементом при установке положительного z-индекса для дочернего элемента. Кроме того, невозможно разместить родительский элемент выше дочернего, если мы установим для родительского элемента z-index, отличный от auto (положительный или отрицательный).
Единственный случай, когда у нас может быть дочерний элемент ниже своего родителя, - это установить отрицательный z-index для дочернего элемента и оставить родительский элемент в z-index: auto, таким образом, этот элемент не будет создавать контекст наложения и, следуя порядку рисования, ребенок будет раскрашен первым.
Помимо z-index есть другие свойства, которые создают контекст наложения. В случае, если вы столкнулись с ожидаемым порядком наложения, вам необходимо также рассмотреть эти свойства, чтобы увидеть, создан ли контекст наложения.
Некоторые важные факты, которые мы можем сделать на основании вышеизложенного:
Контексты наложения могут содержаться в других контекстах наложения и вместе создавать иерархию контекстов наложения.
Каждый контекст стекирования полностью независим от своих братьев и сестер: при обработке стекирования учитываются только дочерние элементы.
Каждый контекст наложения является самодостаточным: после наложения содержимого элемента весь элемент рассматривается в порядке наложения родительского контекста наложения. ссылка
1: есть несколько хитрых способов, если мы рассмотрим использование трехмерного преобразования.
Пример с элементом, идущим под своим родительским элементом, даже если для него указан z-index.
.коробка {
положение: относительное;
z-индекс: 0;
высота: 80 пикселей;
фон: синий;
стиль преобразования: сохранить-3d; /* Это важно */
}
.box> div {
маржа: 0 50 пикселей;
высота: 100 пикселей;
фон: красный;
z-индекс: -1; / * это ничего не даст * /
преобразовать: translateZ (-1px); / * это творит чудеса* /
}

 

Другой пример, в котором мы можем разместить элемент между двумя элементами в другом контексте стекирования:
.коробка {
положение: относительное;
z-индекс: 0;
высота: 80 пикселей;
фон: синий;
}
.box> div {
маржа: 0 50 пикселей;
высота: 100 пикселей;
фон: красный;
z-индекс: 5;
преобразовать: translateZ (2px);
}
.за пределами {
высота: 50 пикселей;
фон: зеленый;
маржа: -10px 40px;
преобразовать: translateZ (1px);
}
тело {
стиль преобразования: сохранить-3d;
}

 

 
У нас также может быть какой-то сумасшедший порядок укладки, как показано ниже:
.коробка {
ширина: 100 пикселей;
высота: 100 пикселей;
позиция: абсолютная;
}
тело {
стиль преобразования: сохранить-3d;
}
 
 
 
 
Следует отметить, что использование такого взлома может иметь некоторый побочный эффект из-за того, что стиль преобразования, перспектива и преобразование будут влиять на элемент position: absolute / fixed. Связанный: CSS-фильтр для родительских разрывов дочернего позиционирования
10
|
Хороший способ подумать об этом - это то, что каждый родитель содержит свой собственный контекст стекирования. Родственные элементы разделяют порядок расположения родительских элементов и, следовательно, могут перекрывать друг друга.
Дочерний элемент ВСЕГДА получает контекст стекирования на основе своего родителя. Следовательно, необходимо отрицательное значение z-index, чтобы подтолкнуть дочерний элемент «за» родительским (0) контекстом стекирования.
Единственный способ удалить элемент из родительского контекста - использовать position: fixed, поскольку это по существу заставляет его использовать окно для контекста.
1
|
В документации Mozilla говорится
Свойство CSS z-index устанавливает z-порядок позиционированного элемента и его потомков или гибких элементов.
Вот некоторая дополнительная логика из другой статьи StackOverflow, касающаяся детей и потомков.
2
|
Как я могу понять это поведение по логике?
Мне сложно логически понять вашу проблему. Родитель содержит своих детей. Миску можно накрыть другой чашей. Но вы не можете накрыть суп миской, пока не выльете суп из миски.
z-Index устанавливает порядок перекрывающихся элементов. Родитель не может перекрывать своего ребенка.
Имхо, это совершенно логично.
|
Твой ответ
StackExchange.ifUsing ("редактор", function () {
StackExchange.using ("externalEditor", function () {
StackExchange.using ("сниппеты", function () {
StackExchange.snippets.init ();
});
});
}, "фрагменты кода");
StackExchange.ready (функция () {
var channelOptions = {
теги: "" .split (""),
id: "1"
};
initTagRenderer ("". split (""), "" .split (""), channelOptions);
StackExchange.using ("externalEditor", function () {
// Должен запускать редактор после сниппетов, если сниппеты включены
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using ("сниппеты", function () {
createEditor ();
});
}
еще {
createEditor ();
}
});
function createEditor () {
StackExchange.prepareEditor ({
useStacksEditor: ложь,
heartbeatType: 'ответ',
autoActivateHeartbeat: false,
convertImagesToLinks: правда,
noModals: правда,
showLowRepImageUploadWarning: true,
РепутацияToPostImages: 10,
bindNavPrevention: правда,
постфикс: "",
imageUploader: {
brandingHtml: "На основе \ u003ca href = \" https: //imgur.com/ \ "\ u003e \ u003csvg class = \" svg-icon \ "width = \" 50 \ "height = \" 18 \ "viewBox = \ "0 0 50 18 \" fill = \ "none \" xmlns = \ "http: //www.w3.org/2000/svg \" \ u003e \ u003cpath d = \ "M46.1709 9.17788C46.1709 8.26454 46.2665 7.94324 47.1084 7.58816C47.4091 7.46349 47.7169 7.36433 48.0099 7.26993C48.9099 6.97997 49.672 6.73443 49.672 5.93063C49.672 5.22043 48.9832 4.61182 48.1414 4.61182C47.4335 4.61182 46.725623.40716284,61182C47.4335 4.61182 46.725623.4623.68 43.1481 6.59048V11.9512C43.1481 13.2535 43.6264 13.8962 44.6595 13.8962C45.6924 13.8962 46.1709 13.2535 46.1709 11.9512V9.17788Z \ "/ \ u003e \ u003cpath d = \" M32.492 10.1419954.037.045.037.048.037.048.037.048.0148.048.0148.048.0148.048.0148.048.0148.0148.0148.034.0/14482.0/148.048.0/148.048.0/148.048.0/148.0/148.0/1448.0/148.014.0 41.5985 12.6954 41.5985 10.1419V6.59049C41.5985 5.28821 41.1394 4.66232 40.1061 4.66232C39.0732 4.66232 38.5948 5.28821 38.5948 6.59049V9.60062C38.5948 10.8521 38.2696 11.5455 37.0451 11.5454.595 1045820 35.820 521 35.4954 9.60062V6.59049C35.4954 5.28821 35.0173 4.66232 34.0034 4.66232C32.9703 4.66232 32.492 5.28821 32.492 6.59049V10.1419Z \ "/> \ u003cpath fill-rule = \" evenodd \ "clip-rule = \" evenodd \ " = \ "M25.6622 17.6335C27.8049 17.6335 29.3739 16.9402 30.2537 15.6379C30.8468 14.7755 30.9615 13.5579 30.9615 11.9512V6.59049C30.9615 5.28821 30.4833 4.66231 29.4502 4.66231C28.48334.66231 29.4502 4.66233C28.41087C 4.58.4833 4.66231 29.4502 4.66233C28.40334,65 .1369 4.56087 21.0134 6.57349 21.0134 9.27932C21.0134 11.9852 23.003 13.913 25.3754 13.913C26.5612 13.913 27.4607 13.4902 28.1109 12.6616C28.1109 12.7229 28.1161 12.779928,121 12.8346C28.1256 12,8854 28,1301 12,9342 28,1301 12.983C28.1301 14,4373 27,2502 15,2321 25,777 15.2321C24.8349 15,2321 24,1352 14,9821 23,5661 14.7787C23.176 14,6393 22,8472 14,5218 22,5437 14.5218C21.7977 14,5218 21,2429 15,0123 21,2429 15.6887C21.2429 16,7375 22,9072 17,6335 25,6622 17,6335 ZM24.1317 9.27932C24.1317 7.94324 24.9928 7.09766 26.1024 7.09766C27.2119 7.09766 28.0918 7.94324 28.0918 9.27932C28.0918 10.6321 27.2311 11.5116 26.1024 11.5116C24.9737 11.5116 24.1317 10.649317 \ u / u \ u003c \ u \ u003 \ u003 \ u003 \ u003 \ u003 \ u003c 8045 11.9512C16.8045 13.2535 17.2637 13.8962 18.2965 13.8962C19.3298 13.8962 19.8079 13.2535 19.8079 11.9512V8.12928C19.8079 5,82936 18.4879 4.62866 16.4027 4.62866C15.1594 4.62866 14.279 4.98380375 13.36028.628 C15.1594 4.62866 14.279 4.98380375 13.36028.699 7.9466 5.5079C7.58314 4.9328 7.10506 4.66232 6.51203 4.66232C5.47873 4.66232 5.00066 5.28821 5.00066 6.59049V11.9512C5.00066 13.2535 5.47873 13.8962 6.51203 13.8962C7.54479 13.8962 8.0232 13.2535 8.0232 11.9512V8.90741C8.0232 7.58817 8.44431 6.91179 9.53458 6.91179C10.5104 6.91179 10.893 7.58817 10.893 8.94108V11.9512C10.893 13.2535 11.3711 11.3711 13.8962 12.40447,5125 13.8962C9 6.91179C16.4027 6.91179 16.8045 7.58817 16.8045 8.94108V11.9512Z \ "/> \ u003cpath d = \" M3.31675 6.59049C3.31675 5.28821 2.83866 4.66232 1.82471 4.66232C0.791758 4.66232 0.313354 6.5129021 C0.791758 4.66232 0.313354 6.5129021C0.791758 4.66232 0.313354 6.5129021C 13,8962 1,82471 13,8962C2,85798 13,8962 3,31675 13,2535 3,31675 11,9512V6.59049Z \ "/> \ u003cpath d = \" M1,87209 0,400291C0,843612 0,400291 0 1,1159 0 1,98861C0 2,87697001,822834 3,57673,57672,822834 3,6762 3,5767 C0 2,87869 0,822846 3,5746 1.98861C3.7234 1.1159 2.90056 0.400291 1.87209 0.400291Z \ "fill = \" # 1BB76E \ "/> \ u003c / svg> \ u003c / a>",
contentPolicyHtml: "Вклады пользователей лицензированы на условиях \ u003ca href = \" https: //stackoverflow.com/help/licensing \ "\ u003ecc by-sa \ u003c / a \ u003e \ u003ca href = \" https://stackoverflow.com / legal / content-policy \ "> (политика содержания) \ u003c / a>",
allowUrls: true
},
onDemand: правда,
discardSelector: ".discard-answer"
, немедленноShowMarkdownHelp: true, enableTables: true, enableSnippets: true
});
}
});
Спасибо за ответ на Stack Overflow!
Обязательно ответьте на вопрос. Сообщите подробности и поделитесь своим исследованием!
Но избегайте…
Просить о помощи, разъяснениях или отвечать на другие ответы.
Делать заявления, основанные на мнении; подкрепите их рекомендациями или личным опытом.
Чтобы узнать больше, ознакомьтесь с нашими советами по написанию отличных ответов.
Черновик сохранен
Черновик отклонен
Зарегистрируйтесь или войдите под своим ником
StackExchange.ready (функция () {
StackExchange.helpers.onClickDraftSave ('# ссылка для входа');
});
Зарегистрируйтесь с помощью Google
Зарегистрируйтесь через Facebook
Зарегистрируйтесь, используя электронную почту и пароль
Представлять на рассмотрение
Опубликовать как гость
Имя
Электронное письмо
Обязательно, но не отображается
StackExchange.ready (
function () {
StackExchange.openid.initPostLogin ('. New-post-login', 'https% 3a% 2f% 2fstackoverflow.com% 2fquestions% 2f54897916% 2fwhy-cant-an-element-with-az-index-value-cover-its- дочерний% 23new-answer ',' question_page ');
}
);
Опубликовать как гость
Имя
Электронное письмо
Обязательно, но не отображается
Разместите свой ответ
Отказаться
Нажимая «Опубликовать ответ», вы соглашаетесь с нашими условиями обслуживания, политикой конфиденциальности и политикой файлов cookie.
Не тот ответ, который вы ищете? Просмотрите другие вопросы с метками css css-position z-index или задайте свой вопрос.